<!-- subpkg_consult/room/components/room-status.vue -->
<script setup>
	// 接收组件外部传入的数据
	const props = defineProps({
		status: Number,
		statusValue: String,
		countdown: Number,
	})
</script>
<template>
	<!-- 咨询室状态 -->
	<view class="room-status">
		<view class="status countdown" v-if="status === 3">
			<text class="label">{{ statusValue }}</text>
			<view class="time">
				剩余时间:
				<uni-countdown
					color="#3c3e42"
					:font-size="14"
					:show-day="false"
					:second="countdown"
				/>
			</view>
		</view>
		<view v-if="status === 2" class="status waiting">
			{{ statusValue }}
		</view>
		<view v-if="status === 4" class="status">
			<uni-icons size="20" color="#121826" type="checkbox-filled" />
			{{ statusValue }}
		</view>
	</view>
</template>

<style lang="scss">
	.room-status {
		font-size: 26rpx;
		position: sticky;
		top: 0;
		z-index: 99;

		.status {
			display: flex;
			padding: 30rpx;
			background-color: #fff;
		}

		.waiting {
			color: #16c2a3;
			background-color: #eaf8f6;
		}

		.countdown {
			justify-content: space-between;
		}

		.label {
			color: #16c2a3;
		}

		.icon-done {
			color: #121826;
			font-size: 28rpx;
			margin-right: 5rpx;
		}

		.time {
			display: flex;
			color: #3c3e42;
		}

		:deep(.uni-countdown) {
			margin-left: 6rpx;
		}
	}
</style>
